<template>
  <!--- header begin-->
  <header id="pc-header">
    <div class="BHeader">
      <div class="yNavIndex">
        <ul class="BHeaderl">
          <li style="display:none;"><a href="#"
               style="float:left;">嘻哈杂货铺</a> <a href="#"
               style="float:left;">退出</a> </li>
          <li :id="isEmpty(menu.subMenus) ? 'pli' : 'pc-nav'"
              v-for="menu in topMenus"
              :class="{ menu: !isEmpty(menu.subMenus) }">
            <a :href="menu.url"
               :class="{ tit: !isEmpty(menu.subMenus) }">{{menu.title}}</a>
            <div v-if="!isEmpty(menu.subMenus)"
                 class="subnav">
              <a v-for="subMenu in menu.subMenus"
                 :href="subMenu.url">{{subMenu.title}}</a>
            </div>
          </li>
          <!--<li><a href="login.html"
                   style="color:#ea4949;">请登录</a> </li>
              <li class="headerul">|</li>
              <li><a href="register.html">免费注册</a> </li>
              <li class="headerul">|</li>
              <li><a href="my-d.html">订单查询</a> </li>
              <li class="headerul">|</li>
              <li><a href="my-s.html">我的收藏</a> </li>
              <li class="headerul">|</li>
              <li id="pc-nav"
                  class="menu"><a href="my-user.html"
                   class="tit">我的商城</a>
                <div class="subnav">
                  <a href="my-d.html">我的订单</a>
                  <a href="my-s.html">我的收藏</a>
                  <a href="my-user.html">账户安全</a>
                  <a href="my-add.html">地址管理</a>
                  <a href="my-p.html">我要评价</a>
                </div>
              </li>
              <li class="headerul">|</li>
              <li id="pc-nav1"
                  class="menu"><a href="#"
                   class="tit M-iphone">手机悦商城</a>
                <div class="subnav">
                  <a href="#"><img src="theme/icon/ewm.png"
                         width="115"
                         height="115"
                         title="扫一扫，有惊喜！"></a>
                </div>
              </li>-->
        </ul>
      </div>
    </div>
    <div class="container clearfix">
      <div class="header-logo fl">
        <h1><a href="首页.html"><img src="theme/icon/logo.png"></a> </h1></div>
      <div class="head-form fl">
        <form class="clearfix">
          <input type="text"
                 class="search-text"
                 accesskey=""
                 id="key"
                 autocomplete="off"
                 placeholder="洗衣机">
          <button class="button"
                  onClick="search('key');return false;">搜索</button>
        </form>
        <div class="words-text clearfix">
          <a href="#"
             class="red">1元秒爆</a>
          <a href="#">低至五折</a>
          <a href="#">农用物资</a>
          <a href="#">买一赠一</a>
          <a href="#">佳能相机</a>
          <a href="#">稻香村月饼</a>
          <a href="#">服装城</a>
        </div>
      </div>
      <div class="header-cart fr">
        <a href="#"><img src="theme/icon/car.png"></a> <i class="head-amount">99</i></div>
      <div class="head-mountain"></div>
    </div>
    <div class="yHeader">
      <div class="yNavIndex">
        <categories v-if="showCategories"></categories>
        <ul class="yMenuIndex">
          <li v-for="menu in bottomMenus"><a :href="menu.url"
               target="_blank">{{menu.title}}</a></li>
        </ul>
      </div>
    </div>
  </header>
  <!-- header End -->
</template>

<script>

import Categories from 'components/common/Categories'

export default {
  name: 'PcHeader',
  data () {
    return {
      topMenus: [
        {
          title: '请登录',
          url: '',
          subMenus: []
        },
        {
          title: '注册',
          url: '',
          subMenus: []
        },
        {
          title: '我的订单',
          url: '',
          subMenus: []
        },
        {
          title: '我的收藏',
          url: '',
          subMenus: []
        },
        {
          title: '我的商城',
          url: '',
          subMenus: [
            {
              title: '我的订单',
              url: '#'
            },
            {
              title: '我的收藏',
              url: '#'
            },
            {
              title: '我的信息',
              url: '#'
            },
            {
              title: '收货地址',
              url: '#'
            }
          ]
        }
      ],
      categories: [],
      bottomMenus: [
        {
          title: '菜单1',
          url: 'https://jd.com'
        },
        {
          title: '菜单2',
          url: 'https://jd.com'
        },
        {
          title: '菜单3',
          url: 'https://jd.com'
        },
        {
          title: '菜单4',
          url: 'https://jd.com'
        },
        {
          title: '菜单5',
          url: 'https://jd.com'
        },
        {
          title: '菜单6',
          url: 'https://jd.com'
        }
      ]
    }
  },
  props: {
    showCategories: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    isEmpty: (value) => {
      return Object.keys(value).length === 0
    }
  },
  components: {
    Categories
  }
}

</script>
